<template>
    <div>
        <h2>Home组件</h2>
        <!-- 声明式路由导航-使用router-link组件,支持用户在具有路由功能的应用中 (点击) 导航 -->
        <!--  <router-link to="/Home/News" tag="button">新闻</router-link>
    <router-link to="/Home/Music" tag="button">音乐</router-link>
    <router-link to="/Home/Game" tag="button">游戏</router-link> -->

        <!-- 
        replace属性让路由跳转的过程中替换之前的历史记录
        -->
        <!-- 
        active-class:设置链接激活时使用的 CSS 类名

        -->
        <router-link 
            :to="{
                path:'./Home/News',
            }"
            tag="button"
            replace
            active-class="active"
        >新闻</router-link>
        <router-link 
            :to="{
                name:'Music',
            }"
            tag="button"
            replace
            active-class="active"
        >音乐</router-link>
        <router-link 
            :to="{
                name:'Game',
            }"
            tag="button"
            replace
            active-class="active"
        >游戏</router-link>
        <!-- home中的二级路由出口 -->
        <router-vive ></router-vive>
    </div>
</template>

<script>
export default {
    name: "Home",
};
</script>

<style scoped>
    .active{
        background: yellow;
    }
</style>
